<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>admin管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">

    <!-- 上传图片框样式，不使用上传组件可以删除此样式 -->
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 150px;
            height: 70px;
            line-height: 150px;
            text-align: center;
        }
        .avatar {
            width: 150px;
            height: 70px;
            display: block;
        }

    </style>
    <script src="../js/util.js"></script>
</head>
<body class="hold-transition">
<div id="app">

    <div class="content-header">
        <h1>管理<small>admin管理</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>管理</el-breadcrumb-item>
            <el-breadcrumb-item>admin管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div v-for="(item, index) in menuList" :key="index">
        <div class="box">
            {{item.title}}
            <div style="margin: 10px" v-for="(item1, index1) in item.children" :key="index">
                {{item1.title}}
                <el-checkbox-group
                        v-model="options">
                    <el-checkbox v-for="resource in item1.children" :label="resource.path" :key="resource.path">
                        {{resource.title}}
                    </el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
    </div>
    <div style="text-align: center">
        <el-button type="primary" @click="save()">保存</el-button>
        <p></p>
    </div>



</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>

<script>
    new Vue({
        el: '#app',
        data(){
            return {
                pojo:[],
                options:[],
                menuList:[],
                Id:0
            }
        },
        created(){
            this.Id = getQueryString("id");
            this.findAllMenu();
            this.findByIdMenu();
        },
        methods:{
            findAllMenu(){
                axios.get(`/menu/findMenu.do`).then(res => {
                    this.menuList=res.data;
                    console.log("roleList"+this.roleList)
                })
            },
            findByIdMenu(){
                axios.get(`/role/findAllPath.do?id=${this.Id}`).then(response => {
                    console.log(response.data);
                    this.options = response.data;
                })
            },
            save(){
                axios.post(`/role/updateRoleMenu.do?id=${this.Id}`,this.options).then(response => {
                    console.log(response.data);
                    location.href = "role.html";
                });
            }
        }
    })
</script>
</html>
